import React, {useState} from "react";
import './Login.less'
import {UserOutlined,LockOutlined} from '@ant-design/icons'
import {myLogin} from "../../request";
import {useNavigate} from "react-router-dom";
import store from '../../store'
import {USER_LOGIN} from '../../store/actionTypes'
import { message, Button, Space } from 'antd';
import localStorage from "redux-persist/es/storage";



function Login(){
    const navigate = useNavigate()
    const [outline,setOutline] = useState('1px solid #86A4C3')
    const [outline1,setOutline1] = useState('1px solid #86A4C3')
    const [value1,setValue1] = useState()
    const [value2,setValue2] = useState()


    //获取焦点事件
    function focus(){
        setOutline('1px solid #0052CC')
    }
    function focus1(){
        setOutline1('1px solid #0052CC')
    }
    //失去焦点事件
    function blur(){
        setOutline('')
    }
    function blur1(){
        setOutline1('')
    }
    //input的change事件
    function change(e){
        setValue1(e.target.value)
    }
    function change1(e){
        setValue2(e.target.value)
    }
    //登录的点击事件
    const sigIn = ()=>{
        let myOne = (/^[\w]{7,16}$/)
        //判断账号密码是否空
        if (value1 === undefined || value2 === undefined){
            message.error('密码或者账号不能为空');
            //判断账号密码格式
        }else if (myOne.test(value1) !== true){
            message.error('账号格式不对');
        }else {
            myLoginIn()
        }
    }
    const myLoginIn = async()=> {
        const {data:res} = await myLogin.sigIn(value1,value2)
        if (res.code >= 200 && res.code<300){
            if (res.data[0].user_live !== -1){
                localStorage.setItem("token",'Bearer ' + res.token1)
                // localStorage.setItem("token1",res.token1)
                // localStorage.setItem('token',res.token1)
                const action = {
                    type:USER_LOGIN,
                    UserInformation:res.data[0]
                }
                store.dispatch(action)
                navigate('/IndexPage')
            }else {
                message.error('您没有进入该系统的权限');
            }
        }else {
            message.error('密码错误');
        }
    }
    return(
        <div className='loginBox'>
            <div className='login'>
                <h1>Let's Get Started</h1>
                <div className='login-welcome'>Sign in to continue freeBuyAdmin</div>
                <div className='login-ipt' style={{marginTop:'30px',marginBottom:'14px'}}><div className='login-ico'>
                    <UserOutlined/></div>
                    <input type="text" placeholder='username' style={{outline:outline}} onFocus={focus} onBlur={blur} onChange={change}/></div>
                <div className='login-ipt'><div className='login-ico'>
                    <LockOutlined/></div>
                    <input type="password" placeholder='password' style={{outline:outline1}} onFocus={focus1} onBlur={blur1} onChange={change1}/>
                </div>
                <Space>
                    <Button onClick={sigIn} className='sigIn'>SIGN IN</Button>
                </Space>
            </div>
        </div>
    )
}
export default Login